import { useQuery } from "react-query";
import { request } from "@/request";
import { EStatus } from "@/types";
import {
  BarChart,
  Bar,
  Rectangle,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

const stats = [
  {
    title: "Pedding Application",
    key: EStatus.PENDING,
    borderColor: "border-b-yellow-400",
    textColor: "text-yellow-400",
  },
  {
    title: "Interviews Scheduled",
    key: EStatus.INTERVIEW,
    borderColor: "border-b-purple-400",
    textColor: "text-purple-400",
  },
  {
    title: "Jobs Declined",
    key: EStatus.DECLINED,
    borderColor: "border-b-red-400",
    textColor: "text-red-400",
  },
];

type TStatus = {
  [key in EStatus]: number;
};

type TMonthItem = {
  name: string;
  count: number;
};

type TStatsRes = {
  byStatus: TStatus;
  byMonth: Array<TMonthItem>;
};

const Dashboard = () => {
  const { data } = useQuery<TStatsRes>("stats", async () => {
    const res = await request<TStatsRes>("/jobs/stats");
    return res.data;
  });

  if (!data) return <div>Loading ...</div>;

  return (
    <div>
      <div className="grid grid-cols-3 gap-x-4">
        {stats.map((item) => {
          const boxCls = `box border-2 ${item.borderColor}`;
          const textCls = `py-2 font-semibold text-3xl ${item.textColor}`;

          return (
            <div className={boxCls} key={item.title}>
              <p className={textCls}>{data.byStatus[item.key]}</p>
              <p className="text-base">{item.title}</p>
            </div>
          );
        })}
      </div>
      <div className="w-full mt-10 flex flex-col items-center">
        <h2 className="my-8">Monthly Applications</h2>
        <div className="h-80 w-full">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart
              data={data.byMonth}
              margin={{
                top: 5,
                right: 0,
                left: 0,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar
                dataKey="count"
                fill="#82ca9d"
                activeBar={<Rectangle fill="gold" stroke="purple" />}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;
